<!DOCTYPE html>
<html ng-app="demoapp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../bower_components/semantic-ui/dist/semantic.min.css">
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.css">
    <link rel="stylesheet" href="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.css">
    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />

    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/semantic-ui/dist/semantic.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../dist/angular-leaflet-directive.min.js"></script>
    <script src="../bower_components/Leaflet.awesome-markers/dist/leaflet.awesome-markers.js"></script>
    <script src="../bower_components/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>
    <script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
    <script src="../bower_components/Leaflet.ExtraMarkers/src/leaflet.extra-markers.js"></script>

    <script>
        var app = angular.module("demoapp", ['leaflet-directive']);

        app.controller("MarkersModalMarkerClusterController", ['$scope', 'leafletData', function($scope, leafletData) {
            var markers = [];
            markers.push({
                lat: 52.229676,
                lng: 21.012229,
                draggable: false,
                group: 'markers'
            });
            markers.push({
                lat: 52.219081,
                lng: 21.025386,
                draggable: false,
                group: 'markers'
            });


            angular.extend($scope, {
                defaults: {
                    maxZoom: 18,
                    minZoom: 0
                },
                layers: {
                    baselayers: {
                        osm: {
                            name: 'OpenStreetMap',
                            type: 'xyz',
                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            layerOptions: {
                                subdomains: ['a', 'b', 'c'],
                                attribution: '© OpenStreetMap contributors',
                                continuousWorld: true
                            }
                        }
                    }
                },
                center: {
                    zoom: 10,
                    lat: 52.229676,
                    lng: 21.012229
                },
                markers: {

                    m1: {
                        lat: 52.229676,
                        lng: 21.012229,
                        draggable: false,
                        group: 'markers'
                    },
                    m2: {
                        lat: 52.219081,
                        lng: 21.025386,
                        draggable: false,
                        group: 'markers'
                    }
                }
            });

            var map;
            leafletData.getMap().then(function(lfMap) {
                map = lfMap;
            });

            $scope.showModal = function() {
                $('.ui.modal').modal('show');
                map.invalidateSize();
            };

        }]);
    </script>
</head>

<body ng-controller="MarkersModalMarkerClusterController">
    <h1>Markercluster in a SemanticUI modal</h1>
    <button class="btn btn-lg btn-primary" ng-click="showModal()">Open the map in a modal</a>

    <div class="ui modal">
        <i class="close icon"></i>
        <div class="header">Modal map example</div>
        <div class="content">
            <leaflet defaults="defaults" layers="layers" lf-center="center" markers="markers" width="100%" height="320px"></leaflet>
        </div>
        <div class="actions">
            <div class="ui button">Cancel</div>
            <div class="ui button">OK</div>
        </div>
    </div>
</body>

</html>
